<template>
  <div class="recommend-container">
    <div class="box">

      <el-tabs>
        <el-tab-pane>
          <div slot="label">
            <i class="el-icon-date"></i>
            推荐课程
          </div>

          <div class="course-box">
            <div v-for="(obj,i) in courseList" :key="obj.id" class="course-wrap">
              <img :src="obj.url" alt="">
              <div class="details">
                <div class="label1" v-if="i==1||i==0">
                  最近学过
                </div>
                <div class="label2" v-else>
                  热点课程
                </div>
                <div>124578人学过</div>
                <div>4578人正在学习</div>

              </div>
            </div>
          </div>
        </el-tab-pane>


<!--        <el-tab-pane>
          <div slot="label">
            <i class="el-icon-c-scale-to-original"></i>
            知识巩固
          </div>
          todo
        </el-tab-pane>-->

        <el-tab-pane>
          <div slot="label">
            <i class="el-icon-sort"></i>
            编程排行
          </div>
          <div>
            <LanguageRank></LanguageRank>
          </div>
        </el-tab-pane>


      </el-tabs>

    </div>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import LanguageRank from "@/components/home/LanguageRank"

export default {
  //组件名称
  name: "Recommend",
  props: [],
  //组件注册
  components: {
    IconAli,
    LanguageRank
  },
  //数据驱动
  data() {
    return {
      courseList: [
        {id: "1", url: "https://p4java.wyxjava.com/1437615701179953152.png", desc: ""},
        {id: "2", url: "https://p4java.wyxjava.com/1437615400968450048.jpg", desc: ""},
        {id: "3", url: "https://p4java.wyxjava.com/1437615450654175232.png", desc: ""},
        {id: "4", url: "https://p4java.wyxjava.com/1437615829232054272.png", desc: ""},
        {id: "5", url: "https://p4java.wyxjava.com/1437615701179953152.png", desc: ""},
        {id: "6", url: "https://p4java.wyxjava.com/1437615400968450048.jpg", desc: ""},
        {id: "7", url: "https://p4java.wyxjava.com/1437615450654175232.png", desc: ""},
        {id: "8", url: "https://p4java.wyxjava.com/1437615829232054272.png", desc: ""},
      ]
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {},
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.recommend-container {

  .course-box {
    .course-wrap {
      display: flex;
      margin-bottom: 10px;

      img {
        width: 162px;
        height: 100px;
        display: inline-block;
      }

      .details {
        margin-left: 6px;

        .label1{
          background-color: #FFF;
          color:#f64747;
          font-size: 14px;
          font-weight:bolder;
          width: 64px;
          text-align:center;
          border-radius: 2px;
        }
        .label2{
          background-color: #f64747;
          color:#FFF;
          font-size: 14px;
          width: 64px;
          text-align:center;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>